import {createElement, Component} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Image from 'rax-image';
import Link from 'rax-link';
import TextInput from 'rax-textinput';
import Button from 'rax-button';
import Switch from 'rax-switch';
import Video from 'rax-video';
import ScrollView from 'rax-scrollview';
import TouchableWithoutFeedback from 'rax-touchable';
import Icon, {createIconSet} from 'rax-icon';

let iconImage = '';
let iconfont = '//at.alicdn.com/t/font_lf2urtr9li110pb9.ttf';
let NewImage = createIconSet({
  name1: '\uE9f2',
  name2: '\uE65B',
  name3: '\uE782',
  name4: '\uE669',
  name5: '\uE66D',
}, 'iconfont', iconfont);

class IconDemo extends Component {
  render() {
    return (
      <View>

        <View style={styles.container}>
          <View style={styles.iconBox}>
            <Icon style={styles.icon} source={{uri: iconImage}} />
          </View>
        </View>

        <View style={styles.container}>
          <Icon fontFamily="iconfont" source={{uri: iconfont, codePoint: '\uE603'}} />
        </View>

        <View style={styles.container}>
          <View style={styles.iconBox3}>
            <NewImage name={'name1'} />
            <NewImage name={'name2'} />
            <NewImage name={'name3'} />
            <NewImage name={'name4'} />
            <NewImage name={'name5'} />
          </View>
        </View>

      </View>
    );
  }
}

let styles = {
  container: {
    padding: 20,
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  iconBox: {
    backgroundColor: '#dddddd',
  },
  icon: {
    width: 65,
    height: 50,
  }
};

export default IconDemo;
